<template>
    <template v-for="item in menuList" :key="item.index">
        <template v-if="item.children?.length">
            <el-sub-menu v-if="item.children?.length" class="sub-menu-item" v-bind="item.subMenuProps">
                <template #title>
                    <slot name='subTitle' v-bind="item"></slot>
                </template>
                <menu-item :menuList="item.children" :clickCallback="clickCallback">
                    <template v-slot:subTitle="subItem">
                        <slot name="title" v-bind="subItem"></slot>
                    </template>
                    <template v-slot:title="subItem">
                        <slot name="title" v-bind="subItem"></slot>
                    </template>
                    <template v-slot="subItem">
                        <slot v-bind="subItem"></slot>
                    </template>
                </menu-item>
            </el-sub-menu>
        </template>

        <template v-else>
            <el-menu-item class="menu-item" v-bind="item.menuItemProps" @click="clickCallback($event, item)">
                <slot v-bind="item"></slot>
                <template #title>
                    <slot name="title" v-bind="item"></slot>
                </template>
            </el-menu-item>
        </template>
    </template>
</template>

<script lang="ts" setup>
import { MenuType } from './useMenu';

defineOptions({ name: 'MenuItem' })
defineProps<{
    menuList: MenuType[],
    clickCallback: (event: Event, data: MenuType) => void
}>();
</script>

<style lang="scss" scoped></style>
